<template>
  <div class="content">
    <v-title title="计划" :isShow="false"></v-title>

    <div class="table">
      <el-table
        class="marT"
        v-for="(table, index) in tableArray"
        :key="'table' + index"
        :border="true"
        :header-cell-style="{background:'rgb(48, 65, 86)'}"
        :data="tables[table]"                      
        style="width: 100%"
        >
        <el-table-column
          v-for="column in Object.keys(tables[table][0])"
          :key="tables[table][0][column].label"
          :label="tables[table][0][column].label"
          align="center"
          prop="name"
        >       
          <template>
            <div v-if="tables[table][0][column].is_disabled">
              <span>{{ tables[table][0][column].value }}</span>
            </div>
            <div v-else>
              <el-input v-model="tables[table][0][column].value" placeholder="请输入内容"></el-input>
            </div>
          </template>
        </el-table-column>       
      </el-table>     
    </div>

    <v-title title="执行" :isShow="false"></v-title>

    <div class="table">
      <el-table
        class="marT"
        v-for="(table, index) in tableArray3"
        :key="'table' + index"
        :border="true"
        :header-cell-style="{background:'rgb(48, 65, 86)'}"
        :data="tables3[table]"                      
        style="width: 100%"
        >
        <el-table-column
          v-for="column in Object.keys(tables3[table][0])"
          :key="tables3[table][0][column].label"
          :label="tables3[table][0][column].label"
          align="center"
          prop="name"
        >       
          <template>
            <div v-if="tables3[table][0][column].is_disabled">
              <span>{{ tables3[table][0][column].value }}</span>
            </div>
            <div v-else>
              <el-input v-model="tables3[table][0][column].value" placeholder="请输入内容"></el-input>
            </div>
          </template>
        </el-table-column>       
      </el-table>  
    </div>

    <v-title title="交付" :isShow="false"></v-title>

    <div class="table">
      <el-table
        class="marT"
        v-for="(table, index) in tableArray2"
        :key="'table' + index"
        :border="true"
        :header-cell-style="{background:'rgb(48, 65, 86)'}"
        :data="tables2[table]"                      
        style="width: 100%"
        >
        <el-table-column
          v-for="column in Object.keys(tables2[table][0])"
          :key="tables2[table][0][column].label"
          :label="tables2[table][0][column].label"
          align="center"
          prop="name"
        >       
          <template>
            <div v-if="tables2[table][0][column].is_disabled">
              <span>{{ tables2[table][0][column].value }}</span>
            </div>
            <div v-else>
              <el-input v-model="tables2[table][0][column].value" placeholder="请输入内容"></el-input>
            </div>
          </template>
        </el-table-column>       
      </el-table>     
    </div>
  </div>
</template>

<script>
  import VTitle from './title'
  import http from '@/views/sys/axios' 
  import { mapState } from 'vuex'

  export default {
    name: 'Content',
    components: {
      VTitle
    },
    data() {
      return {
        tables: {},
        tables2: {},
        tables3: {},
        tableArray: [],
        tableArray2: [],
        tableArray3: []
      }
    },
    computed: {
      ...mapState({
        condition: state => state.conditions.condition
      })     
    },
    methods: {
      getReplay() {
        return http.get(`${process.env.VUE_APP_KANBAN_HOST}/api/data_summary/test_replay/entry?projectId=${this.condition.projectId}`)
      },
      async getReplayResult() {
        const { code, result } = await this.getReplay()
        try {
          if(code === 200) {
            let arr = result           
            Object.keys(arr).forEach(item => {
              if(item ==='project_info' || item ==='requirement' || item === 'case') {
                this.tables[item] = arr[item]
              } else if(item ==='deliverable' || item ==='template' || item === 'flow') {
                this.tables2[item] = arr[item]
              } else {
                this.tables3[item] = arr[item]
              }
            })   
            this.tableArray = Object.keys(this.tables)
            this.tableArray2 = Object.keys(this.tables2) 
            this.tableArray3 = Object.keys(this.tables3)  
          }
        } catch(err) {
          console.log(err)
        }
      }
    },
    watch: {
      condition: {
        handler: function() {
          this.getReplayResult()
        },
        deep: true
      }
    }
  }
</script>

<style lang="scss" scoped>
  /deep/ .el-table thead{
    color: #fff;
  }
  .table{  
    .marT{
      margin-top: 10px;
    }
  }
</style>